<template>
    <div class="center-safe">
        <div class="head">账号安全</div>
        <div class="card">
            <div class="form">
                <div class="form-view">
                    <div class="form-item">
                        <div class="form-label">手机号</div>
                        <div class="form-line"></div>
                        <div class="form-input">
                            <input type="text" v-model="form.mobile" disabled placeholder="请输入手机号">
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-label">验证码</div>
                        <div class="form-line"></div>
                        <div class="form-input">
                            <input type="text" maxlength="10" v-model="form.code" placeholder="请输入验证码">
                            <span class="form-sms" v-if="!smsSend" @click="smsSendFun">获取验证码</span>
                            <span class="form-sms" v-else>{{ smsTime }}s</span>
                        </div>
                    </div>
                    <div class="form-item">
                        <div class="form-label">新密码</div>
                        <div class="form-line"></div>
                        <div class="form-input">
                            <input type="password" v-model="form.password" placeholder="请输入密码">
                        </div>
                    </div>
                    <!-- <div class="form-item">
                        <div class="form-label">确认密码</div>
                        <div class="form-line"></div>
                        <div class="form-input">
                            <input type="password" v-model="form.password" placeholder="请输入确认密码">
                        </div>
                    </div> -->
                    <div class="form-btn" @click="login">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {resetPassword,send,getUserInfo} from '@/api/common'
export default {
    name: 'safe',
    data() {
        return {
            smsSend: false,
            smsTime:60,
            smsTimer:null,
            form: {
                mobile: '',
                code:'',
                password: ''
            }
        }
    },
    mounted() {
        this.getUserInfoFun();
    },
    methods: {
        getUserInfoFun(){
            getUserInfo().then(res => {
                if(res.code == 200){
                    this.form.mobile = res.data.username;
                }
            })
        },
        smsSendFun(){
            if(this.smsSend) return;
            if(this.form.mobile == ''){
                return this.$message.error('请输入手机号');
            }
            if(!/^1[23456789]\d{9}$/.test(this.form.mobile)){
                this.$message.error('手机号格式错误')
                return
            }
            send({mobile:this.form.mobile}).then(res=>{
                if(res.code == 200){
                    this.$message.success('短信发送成功');
                    this.smsSend = true;
                    clearTimeout(this.smsTimer);
                    this.smsSend = true;
                    this.smsTimer = setInterval(()=>{
                        if(this.smsTime === 0){
                            clearTimeout(this.smsTimer);
                            this.smsSend = false;
                            this.smsTime = 60;
                            return;
                        }else{
                            this.smsTime--;
                        }
                    },1000)
                }else{
                    this.$message.error(res.msg);
                }
            })
            
        },
        login() {
            // 登录
            if(this.form.mobile == ''){
                return this.$message.error('请输入手机号');
            }
            if(!/^1[23456789]\d{9}$/.test(this.form.mobile)){
                this.$message.error('手机号格式错误')
                return
            }
            if(this.form.code == ''){
                return this.$message.error('请输入验证码');
            }
            if(this.form.password == ''){
                return this.$message.error('请输入密码');
            }
            if(this.form.password.length < 6){
                return this.$message.error('密码最少6位');
            }
            resetPassword(this.form).then(res=>{
                if(res.code == 200){
                    this.$message.success('重置密码成功');
                }else{
                    this.$message.error(res.msg);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.center-safe {

    .card {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0px 0px 0.15rem 0.0125rem rgba(0, 0, 0, 0.08);
        padding: 0.875rem 0 2.5rem;

        .form {
            display: flex;
            flex-direction: column;
            width: 5.625rem;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 0.2rem;
            .form-view {
                width: 100%;

                .form-item {
                    display: flex;
                    align-items: center;
                    height: 0.55rem;
                    box-sizing: border-box;
                    background: #FFFFFF;
                    border-radius: 0.05rem;
                    border: 0.0125rem solid #EEEEEE;
                    margin-bottom: 0.25rem;
                }

                .form-label {
                    width: 1.125rem;
                    font-size: 0.175rem;
                    color: #7D7D7D;
                    text-align: center;

                }

                .form-line {
                    width: 0.0125rem;
                    height: 0.225rem;
                    background: #EEEEEE;
                }

                .form-input {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    padding-right: 0.1875rem;
                    padding-left: 0.1875rem;
                    height: 100%;
                    box-sizing: border-box;

                    .form-sms {
                        font-size: 0.175rem;
                        color: #4F8AF8;
                        cursor: pointer;
                        user-select: none;
                    }

                    input {
                        flex: 1;
                        font-size: 0.175rem;
                        color: #333;
                        border: none;
                        outline: none;
                        font-size: 0.175rem;
                        color: #333;

                        &::-webkit-input-placeholder {
                            font-size: 0.175rem;
                            color: #D7D7D7;
                        }
                    }
                }

                .form-bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 0.575rem;

                    span {
                        font-size: 0.175rem;
                        color: #4F8AF8;
                        cursor: pointer;
                        user-select: none;
                    }
                }

                .form-btn {
                    width: 2.5rem;
                    height: 0.5rem;
                    background: #4F8AF8;
                    cursor: pointer;
                    user-select: none;
                    border-radius: 0.05rem;
                    font-size: 0.2rem;
                    color: #fff;
                    line-height: 0.5rem;
                    text-align: center;
                    margin: 0.5rem auto 0;
                }

                .form-callback {
                    display: flex;
                    align-items: center;
                    margin: 0.35rem auto 0;
                    font-size: 0.2rem;
                    color: #4F8AF8;
                    border-bottom: 0.0125rem solid #4F8AF8;
                    cursor: pointer;
                    user-select: none;

                    img {
                        width: 0.2375rem;
                        height: 0.1625rem;
                        margin-right: 0.05rem;
                    }
                }
            }

            .form-footer {
                width: 100%;
                height: 0.8375rem;
                text-align: center;
                line-height: 0.8375rem;
                background: #F5F6F8;
                border-radius: 0px 0px 0.2rem 0.2rem;
                font-size: 0.2rem;
                color: #999;

                span {
                    cursor: pointer;
                    user-select: none;
                }
            }
        }
    }
}</style>